﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>iStyle</title>
    <link rel="Stylesheet" href="css/testing.css" />
    <link rel="Stylesheet" href="css/istyle.30626.css" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/istyle.30626.js"></script>
    <script type="text/javascript" src="js/testing.js"></script>
</head>
<body>
    <!--This is DropDown List & Select-->
    <div class="border">
        <div class="desc">
            DropDown List & Select
        </div>
        <div class="btn-group">
            <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">
                <span>9:00</span> <b class="caret"></b>
            </button>
            <ul class="dropdown-menu dropdownactive" style="min-width: 70px;">
                <li><a href="javascript:;">17:00</a></li>
                <li><a data-feed="day" href="javascript:;">18:00</a></li>
                <li><a data-feed="day" href="javascript:;">19:00</a></li>
                <li><a data-feed="day" href="javascript:;">23:00</a></li>
                <li><a data-feed="day" href="javascript:;">24:00</a></li>
            </ul>
        </div>
    </div>
    <!--This is Nav Bar-->
    <div class="border">
        <div class="desc">
            NAV Bar
        </div>
        <div class="navbar navbar-satblue">
            <div class="navbar-inner">
                <a class="logo" href="#">站点名称</a>
                <ul class="nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">新闻中心</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            关于我们<b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">企业文化</a></li>
                            <li><a href="#">总裁致辞</a></li>
                            <li><a href="#">发展历程</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form pull-left" action="">
                    <span class="input-append">
                        <input type="text" class="span2" placeholder="搜索什么" />
                        <input class="btn btn-primary" type="submit" value="搜索" />
                    </span>
                </form>
                <ul class="nav pull-right">
                    <li><a href="#">购物车</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            会员中心<b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">修改资料</a></li>
                            <li><a href="#">重置密码</a></li>
                            <li><a href="#">站内信</a></li>
                            <li class="divider"></li>
                            <li class="nav-header">特别推荐</li>
                            <li><a href="#">优惠大放送</a></li>
                            <li><a href="#">最新消息</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#">首页</a> </li>
            <li><a href="#">新闻中心</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    会员中心<b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">修改资料</a></li>
                    <li><a href="#">重置密码</a></li>
                    <li><a href="#">站内信</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <!--This is color font--> 
    <div class="border">
        <div class="desc">
            Color Font Style
        </div>
        <p class="muted">
            同全球172个国家和地区超过23.5万家酒店建立了长期稳定的合作关系。
        </p>
        <p class="text-warning">
            同全球172个国家和地区超过23.5万家酒店建立了长期稳定的合作关系。
        </p>
        <p class="text-error">
            同全球172个国家和地区超过23.5万家酒店建立了长期稳定的合作关系。
        </p>
        <p class="text-info">
            同全球172个国家和地区超过23.5万家酒店建立了长期稳定的合作关系。
        </p>
        <p class="text-success">
            同全球172个国家和地区超过23.5万家酒店建立了长期稳定的合作关系。
        </p>
    </div>
    <!--This is Button-->
    <div class="border">
        <div class="desc">
            Button
        </div>
        <div>
            <button class="btn btn-primary" type="button" onclick="DoSomething()">
                Button
            </button>
            <button class="btn btn-primary btn-large">
                Large Button
            </button>
            <button class="btn btn-primary btn-small">
                Small Button
            </button>
        </div>
        <div style="margin-top: 10px;">
            <button class="btn btn-warning">
                Warning Button
            </button>
            <button class="btn btn-success">
                Success Button
            </button>
            <button class="btn btn-danger">
                Danger Button
            </button>
            <button class="btn btn-inverse">
                Inverse Button
            </button>
            <button class="btn btn-success disabled">
                Disabled button
            </button>
        </div>
        <div style="margin-top: 10px;">
            <div class="btn-group">
                <button class="btn">
                    1
                </button>
                <button class="btn">
                    2
                </button>
                <button class="btn">
                    3
                </button>
            </div>
        </div>
    </div>
    <!--This is Form-->
    <div class="border">
        <div class="desc">
            Form
        </div>
        <textarea cols="3" rows="3"></textarea>
        <div>
            <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
        <div style="margin-bottom: 10px;">
            <label class="checkbox inline">
                <input type="checkbox" id="inlineCheckbox1" value="option1">
                1
            </label>
            <label class="checkbox inline">
                <input type="checkbox" id="inlineCheckbox2" value="option2">
                2
            </label>
            <label class="checkbox inline">
                <input type="checkbox" id="inlineCheckbox3" value="option3">
                3
            </label>
        </div>
        <div class="control-group warning">
            <div class="controls">
                <input type="text" id="inputWarning">
                <span class="help-inline">Something may have gone wrong</span>
            </div>
        </div>
        <div class="control-group error">
            <div class="controls">
                <input type="text" id="inputError">
                <span class="help-inline">Please correct the error</span>
            </div>
        </div>
        <div class="input-prepend">
            <span class="add-on">@</span>
            <input id="prependedInput" type="text" placeholder="Username" />
        </div>
        <div class="input-prepend input-append">
            <span class="add-on">$</span>
            <input id="appendedPrependedInput" type="text" />
            <span class="add-on">.00</span>
        </div>
        <div class="input-append">
            <input id="appendedInputButtons" type="text" />
            <button class="btn" type="button">
                Search
            </button>
            <button class="btn" type="button">
                Options
            </button>
        </div>
        <div class="input-append">
            <input id="appendedDropdownButton" type="text" />
            <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown">
                    Action <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">企业文化</a></li>
                    <li><a href="#">总裁致辞</a></li>
                    <li><a href="#">发展历程</a></li>
                </ul>
            </div>
        </div>
        <form class="form-inline">
            <input type="text" placeholder="Email" />
            <input type="password" placeholder="Password" />
            <label class="checkbox">
                <input type="checkbox">
                Remember me
            </label>
            <button type="submit" class="btn">
                Sign in
            </button>
        </form>
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="inputEmail">
                    Email
                </label>
                <div class="controls">
                    <input type="text" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputPassword">
                    Password
                </label>
                <div class="controls">
                    <input type="password" id="inputPassword" placeholder="Password">
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox">
                        Remember me
                    </label>
                    <button type="submit" class="btn">
                        Sign in
                    </button>
                </div>
            </div>
        </form>
    </div>
    <!--This is Tag-->
    <div class="border">
        <div class="desc">
            Tag
        </div>
        <span class="label">基础的</span> <span class="label label-success">成功的</span> <span class="label label-warning">错误的</span> <span class="label label-important">重要的</span>
        <span class="label label-info">随意的</span> <span class="badge">1</span> <span class="badge badge-success">
            2
        </span> <span class="badge badge-warning">4</span> <span class="badge badge-important">
            6
        </span> <span class="badge badge-info">8</span> <span class="badge badge-inverse">10</span>
    </div>
    <!--This is Table-->
    <div class="border">
        <div class="desc">
            Table
        </div>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>
                        #
                    </th>
                    <th>
                        First Name
                    </th>
                    <th>
                        Last Name
                    </th>
                    <th>
                        Username
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        1
                    </td>
                    <td>
                        Mark
                    </td>
                    <td>
                        Otto
                    </td>
                    <td>
                        @mdo
                    </td>
                </tr>
                <tr>
                    <td>
                        2
                    </td>
                    <td>
                        Jacob
                    </td>
                    <td>
                        Thornton
                    </td>
                    <td>
                        @fat
                    </td>
                </tr>
                <tr>
                    <td>
                        3
                    </td>
                    <td colspan="2">
                        Larry the Bird
                    </td>
                    <td>
                        @twitter
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <!--This is Model Show-->
    <div class="border">
        <div class="desc">
            Model Show
        </div>
        <div style="width: 400px;">
            <div class="thumbnail">
                <div class="caption">
                    <p>
                        <img style="width: 260px; height: 180px;" alt="" src="">
                    </p>
                    <h3>
                        六西格玛体系
                    </h3>
                    <p>
                        制造业的质量管理方法——六西格玛体系成功运用于旅行业。目前，携程各项服务指标均已接近国际领先水平，服务质量和客户满意度也随之大幅提升...
                    </p>
                    <p>
                        <a href="#" class="btn btn-primary">查看详情</a> <a href="#" class="btn">不喜欢</a>
                    </p>
                </div>
            </div>
        </div>
        <div style="margin-top: 10px;">
            <ul class="thumbnails">
                <li class="thumbnail">
                    <div class="row-fluid">
                        <div class="span4 caption">
                            <img style="width: 280px; height: 180px;" alt="" src="">
                        </div>
                        <div class="span8 caption">
                            <h3>
                                六西格玛体系
                            </h3>
                            <p>
                                制造业的质量管理方法——六西格玛体系成功运用于旅行业。目前，携程各项服务指标均已接近国际领先水平，服务质量和客户满意度也随之大幅提升...
                            </p>
                            <p>
                                制造业的质量管理方法——六西格玛体系成功运用于旅行业。目前，携程各项服务指标均已接近国际领先水平，服务质量和客户满意度也随之大幅提升...
                            </p>
                            <p>
                                <a href="#" class="btn btn-primary">查看详情</a> <a href="#" class="btn">不喜欢</a>
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--This is Loading-->
    <div class="border">
        <div class="desc">Loading</div>
        <div id="loaddemo" style="height: 200px; position: relative;">
            <style class="loading-1381723440755906545068">
                .loading-1381723440755906545068.loading-mask {
                    background-color: #000;
                    opacity: 0.30;
                    filter: alpha(opacity=30);
                }

                .loading-1381723440755906545068.loading {
                    display: inline-block;
                    *display: inline;
                    *zoom: 1;
                    top: 50%;
                    left: 50%;
                    padding: 20px 40px 16px;
                    background-color: #fff;
                    text-align: center;
                    color: #666;
                    font-size: 12px;
                    border: 1px solid #888;
                    border-radius: 2px;
                    box-shadow: 2px 2px 0 #999;
                }

                    .loading-1381723440755906545068.loading > img {
                        margin: 0 10px 0 0;
                        position: relative;
                        top: -2px;
                    }
            </style>
            <div class="loading-mask loading-1381723440755906545068" style="position: absolute;
                z-index: 999; top: 0px; right: 0px; left: 0px; bottom: 0px;">
            </div>
            <div class="loading loading-1381723440755906545068" style="position: absolute; z-index: 1000;
                margin-top: -31px; margin-left: -92.5px;">
                <img src="" />
                <span>数据加载中...</span>
            </div>
        </div>
        <br />
        <button class="btn btn-primary" id="loaddemo-show">打开</button>
        <button class="btn" id="loaddemo-hide">关闭</button>
    </div>
    <!--This is Option Card-->
    <div class="border">
        <div class="desc">
            Option Card
        </div>
        <div class="tabbable">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab1" data-toggle="tab">新闻中心</a></li>
                <li><a href="#tab2" data-toggle="tab">企业文化</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab1">
                    <p>新闻中心.</p>
                </div>
                <div class="tab-pane" id="tab2">
                    <p>企业文化.</p>
                </div>
            </div>
        </div>
    </div>
    <!--This is Tips-->
    <div class="border">
        <div class="desc">Tips</div>

        <a href="#" class="tipclass" data-toggle="tooltip" data-placement="top" title="提示信息 top">提示信息 top</a>
        <a href="#" class="tipclass" data-toggle="tooltip" data-placement="right" title="提示信息 right">提示信息 right</a>
        <a href="#" class="tipclass" data-toggle="tooltip" data-placement="bottom" title="提示信息 bottom">提示信息 bottom</a>
        <a href="#" class="tipclass" data-toggle="tooltip" data-placement="left" title="提示信息 left">提示信息 left</a>
    </div>
    <!--This is float Div-->
    <div class="border">
        <div class="desc">Float Div</div>

        <a href="javascript:;" class="btn floatDiv" data-toggle="popover" data-placement="top" data-content="此操作存在会员信息曝光的风险，请确认无误后删除！" title="Popover on top">Popover on top</a>
        <a href="javascript:;" class="btn floatDiv" data-toggle="popover" data-placement="top" data-content="此操作存在会员信息曝光的风险，请确认无误后删除！" title="" data-original-title="Popover on top">Popover on top</a>
    </div>
    <!--This is Popup Div-->
    <div class="border">
        <div class="desc">Pop-up Div</div>
        <button class="btn btn-primary" data-toggle="modal" href="#myModal">点击查看</button>
        <div class="modal hide fade" id="myModal" style="display: none;" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3>站内警告</h3>
            </div>
            <div class="modal-body">
                <p>您确定删除此优惠商品吗？</p>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-primary">确定删除</a>
                <a href="#" class="btn" data-dismiss="modal">取消</a>
            </div>
        </div>
    </div>
    <!--This is HighLight Code-->
    <div class="border">
        <div class="desc">HighLight Code</div>
        <pre class="prettyprint prettydark"><span class="tag">&lt;pre</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"prettyprint prettydark"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- Your code --&gt;</span><span class="pln">
</span><span class="tag">&lt;/pre&gt;</span></pre>
    </div>
    <!--This is Progress Bar-->
    <div class="border">
        <div class="desc">Progress Bar</div>
        <div class="progress">
            <div class="bar" style="width: 60%;"></div>
        </div>
    </div>
    <!--This is Warning Div-->
    <div class="border">
        <div class="desc">Warning Div</div>
        <div class="alert alert-success fade in">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <h4>Well done!</h4>
            <p>
                <strong>Yes!</strong>
                酒店离开会的地点很近很方便，每次都会住这里，目前为止还比较。
            </p>
            <button class="btn btn-success">Done it !!</button>
            <button class="btn" data-dismiss="alert">Close</button>
        </div>
    </div>
</body>
</html>
